<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z1 menu" md-component-id="left" md-is-locked-open="$media('gt-md')">
    <md-toolbar>
        <h1 class="md-toolbar-tools">Menu</h1>
    </md-toolbar>
    <md-content layout="column">
        <div layout="column" class="menu-header">
            <div>
                <img ng-src-cache="{{account.data.picto.src | mediaScreen}}" alt="picto"></img>
            </div>
            <h3>{{account.data.login}}</h3>
            <h3>{{account.data.contact.email}}</h3>
        </div>
        <div layout="column" layout-align="start center" class="menu-actions">
            <md-button ng-href="#account" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/th-large.svg" class="md-small"></md-icon>
                <span>Mon profil</span>
            </md-button>
            <md-button ng-href="#parameters" aria-label="Parameters">
                <md-icon md-svg-src="/assets/icons/grey/cog.svg" class="md-small"></md-icon>
                <span>Mes paramètres</span>
            </md-button>
            <md-button ng-href="#subscriptions" aria-label="Subscriptions">
                <md-icon md-svg-src="/assets/icons/grey/bookmark.svg" class="md-small"></md-icon>
                <span>Mes abonnements</span>
            </md-button>
            <md-button ng-click="account.disconnect()" aria-label="Disconnect">
                <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                <span>Déconnecter</span>
            </md-button>
        </div>
    </md-content>
</md-sidenav>

<div layout="column" layout-fill tabindex="-1" role="main">

    <md-toolbar class="toolbar md-whiteframe-z1">

        <div class="md-toolbar-tools">

            <md-button aria-label="Toggle Menu" ng-click="openMenu()" hide-gt-md>
                <md-icon md-svg-src="/assets/icons/white/bars.svg" class="md-medium"></md-icon>
            </md-button>

            <div layout flex>
                
                <div class="md-toolbar-item">
                    <md-button ng-click="back()" aria-label="Back">
                        <md-icon md-svg-src="/assets/icons/white/arrow-left.svg" class="md-medium"></md-icon>
                    </md-button>
                    <span hide-sm>Recherche</span>
                </div>

                <span flex></span>
                
                <div class="md-toolbar-item">
                    <md-button ng-href="/" aria-label="Home">
                        <md-icon md-svg-src="/assets/icons/white/home.svg" class="md-medium"></md-icon>
                    </md-button>
                    <md-button ng-href="#search" aria-label="Search">
                        <md-icon md-svg-src="/assets/icons/white/search.svg" class="md-medium"></md-icon>
                    </md-button>
                </div>
            </div>
        </div>
    </md-toolbar>

    <md-content class="content" md-scroll-y flex>
        
        <div class="card">
            <md-autocomplete
                md-no-cache
                md-selected-item-change="list.goto('search', 'value')"
                md-selected-item="list.value"
                md-search-text="searchText"
                md-items="item in list.research(searchText)"
                md-item-text="item.value"
                placeholder="Recherchez">
                <div layout layout-align="start" layout-fill>
                    <div md-highlight-text="searchText">{{item.value}}</div>
                    <div flex></div>
                    <div ng-if="item.reporting.call > 0">{{item.reporting.call}} requêtes</div>
                    <div ng-if="!item.reporting.call"></div>
                </div>
            </md-autocomplete>
        </div>

    </md-content>
</div>
